<template>
  <div class="map_box">
    <baidu-map
      class="bmView"
      :scroll-wheel-zoom="true"
      :center="center"
      :zoom="zoom"
      :map-click="false"
      @moveend="syncCenterAndZoom"
      @zoomend="syncCenterAndZoom"
      @ready="mapReady"
      ak="HlMs7bB8XxHiWZirZKHoQoZgPZwDU7g4"
    >
      <div class="line_box" v-for="(item,index) in points" :key="index">
        <bml-curve-line
          v-for="(item1,index) in item.points"
          :key="index"
          :points="item1.points"
          :strokeColor="item1.color"
        ></bml-curve-line>
      </div>

      <div v-for="(line,ind) in lines" :key="'l_'+ind">
        <bm-polyline
          @click="clickLine(line)"
          :path="line.path"
          :stroke-color="line.color"
          :stroke-opacity="0.9"
          :stroke-weight="2"
          :editing="false"
        ></bm-polyline>
      </div>
      <bm-view style="width: 100%; height:100%; flex: 1"></bm-view>
      <el-button-group class="btn_group">
          <el-button type="primary" size="mini" @click.native="isSelect(1)">开启选取</el-button>
          <el-button type="primary" size="mini" @click.native="isSelect(2)">关闭选取</el-button>
        </el-button-group>
      <div v-if="markers.length>0">
        <div v-for="(marker,ind) in markers" :key="'m_'+ind">
          <bm-marker
            :position="{lng: marker.lng, lat: marker.lat}"
            :icon="getIcon(marker)"
            @mouseover="markerClick(marker)"
          ></bm-marker>
        </div>
      </div>
      
      <bm-overlay
        @mouseleave.native="closeMark"
        v-if="active"
        pane="labelPane"
        :class="{sample: true}"
        @draw="draw"
      >
        <div v-if="selectMarker.type==='u'">
          <div class="pointer_img">
            <img v-if="selectMarker.img" :src="selectMarker.img" alt />
          </div>
          <div class="pointer_name">{{selectMarker.name}}</div>
          <div class="pointer_phone">{{selectMarker.phone}}</div>
        </div>
        <div v-if="selectMarker.type==='p'">
          <div class="pointer_title">{{selectMarker.name}}</div>
          <div class="pointer_info">车位总数：{{selectMarker.all}}</div>
          <div class="pointer_info">实时泊位数：{{selectMarker.real_time}}</div>
          <div class="pointer_info">共享车位数：{{selectMarker.share}}</div>
          <div class="pointer_info">收费规则：{{selectMarker.feeDesc}}</div>
        </div>
        <div v-if="selectMarker.type==='ug'">
          <div class="pointer_title">位置：{{selectMarker.address}}</div>
          <div class="pointer_info">运管员总数：{{selectMarker.users}}</div>
          <div class="pointer_info">
            <el-row>
              <el-col :span="12">
                <div class="point_line_tongji line1">
                  <i></i>
                  准停:{{selectMarker.line1}}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="point_line_tongji line2">
                  <i></i>
                  禁停:{{selectMarker.line2}}
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="pointer_info">
            <el-row>
              <el-col :span="12">
                <div class="point_line_tongji line3">
                  <i></i>
                  限停:{{selectMarker.line3}}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="point_line_tongji line4">
                  <i></i>
                  临停:{{selectMarker.line4}}
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </bm-overlay>
      <bm-overlay
        v-if="selectMarkData.length>0"
        pane="labelPane"
        :class="{sample1: true}"
        @draw="drawSelect"
      >
        <div class="pointer_title">停车数据</div>
        <div class="pointer_info">停车场数量：{{selectMarkData.length}}</div>
        <div class="pointer_info">车位总数：{{selectMarkDataAll}}</div>
        <div class="pointer_info">实时泊位数：{{selectMarkDataRealTime}}</div>
        <div class="pointer_info">共享车位数：{{selectMarkDataShare}}</div>
        <div class="pointer_info">收费规则：</div>
      </bm-overlay>
    </baidu-map>
  </div>
</template>

<script>
import selfPointerIcon from "@/assets/images/pointer_icon.png";
import selfPointerIcon1 from "@/assets/images/pointer_icon1.png";
import selfPointerIcon2 from "@/assets/images/pointer_icon2.png";
import selfPointerIcon3 from "@/assets/images/pointer_icon3.png";
import selfPointerIcon4 from "@/assets/images/pointer_icon4.png";
import { BmlCurveLine } from "vue-baidu-map";
import "../../utils/searchInRectangle";
export default {
  name: "sysMap",
  components: {
    BmlCurveLine,
    //BMapLib
  },
  props: {
    markers: {
      type: Array,
      value: [],
    },
    selectMarkData: {
      //选择框选择的数据
      type: Array,
      value: [],
    },
    lines: {
      type: Array,
      default() {
        return [];
      },
    },
    points: {
      type: Array,
      value: [],
    },
  },
  mounted() {
    //console.log("挂载",this.markers)
  },
  data() {
    return {
      searchInRect: null,
      map:null,
      BMap: null, // 地图组件是否就绪
      choosedLocation: { province: "", city: "", district: "", addr: "" },
      show: false,
      active: false,
      center: { lng: 0, lat: 0 },
      zoom: 14,
      selfPointerU: {
        url: selfPointerIcon,
        size: { width: 32, height: 32 },
      },
      selfPointerP1: {
        url: selfPointerIcon1,
        size: { width: 32, height: 32 },
      },
      selfPointerP3: {
        url: selfPointerIcon3,
        size: { width: 32, height: 32 },
      },
      selfPointerP4: {
        url: selfPointerIcon4,
        size: { width: 32, height: 32 },
      },
      selfPointerB: {
        url: selfPointerIcon2,
        size: { width: 32, height: 32 },
      },
      selectMarker: {
        lng: 0,
        lat: 0,
        type: "u",
        all: "",
        count: "",
        share: "",
        img: "",
        name: "",
        phone: "",
        checked_num: "",
        street_name: "",
        anomaly_num: "",
        users: "",
        address: "",
        line1: "",
        line2: "",
        line3: "",
        line4: "",
      },
      center: {
        lng: 117.022306,
        lat: 36.667463,
      },
      //选择框中心位置
      selectModelPostion: {
        lng: 0,
        lat: 0,
      },
    };
  },
  methods: {
    onHideMarker() {
      this.active = false;
      this.selectMarker = {
        lng: 0,
        lat: 0,
        type: "u",
        all: "",
        count: "",
        share: "",
        img: "",
        name: "",
        phone: "",
        checked_num: "",
        street_name: "",
        anomaly_num: "",
        users: "",
        address: "",
        line1: "",
        line2: "",
        line3: "",
        line4: "",
      };
    },
    // markerPointClick(e){
    //   console.log("sss",e)
    // },
    //能否选取
    isSelect(num) {
      if (num == 1) {
        this.searchInRect.open();
        this.$emit("clearSelectMarkData");
      } else {
        this.searchInRect.close();
        this.$emit("clearSelectMarkData");
        document.querySelector(".bmView path").style.display = "none";
      }
    },
    /** *
     * 地图点击事件。
     */
    getClickInfo(e) {
      // 调整地图中心位置
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;

      // 此时已经可以获取到BMap类
      if (this.BMap) {
        const that = this;
        // Geocoder() 类进行地址解析
        // 创建地址解析器的实例
        const geoCoder = new this.BMap.Geocoder();
        // getLocation() 类--利用坐标获取地址的详细信息
        // getPoint() 类--获取位置对应的坐标
        geoCoder.getLocation(e.point, function (res) {
          // console.log('获取经纬度', e.point, '获取详细地址', res)
          const addrComponent = res.addressComponents;
          const surroundingPois = res.surroundingPois;
          const province = addrComponent.province;
          const city = addrComponent.city;
          const district = addrComponent.district;
          let addr = addrComponent.street;
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`;
            } else {
              addr += `${surroundingPois[0].title}`;
            }
          } else {
            addr += addrComponent.streetNumber;
          }
          that.choosedLocation = {
            province,
            city,
            district,
            addr,
            ...that.center,
          };
          that.$emit("changeCenter", {
            zoom: that.zoom,
            location: that.choosedLocation,
          });
        });
      }
    },
    syncCenterAndZoom(e) {
      // 返回地图当前的缩放级别
      this.zoom = e.target.getZoom();
      const position = e.target.getCenter();
      // 此时已经可以获取到BMap类
      if (this.BMap) {
        const that = this;
        // Geocoder() 类进行地址解析
        // 创建地址解析器的实例
        const geoCoder = new this.BMap.Geocoder();
        // getLocation() 类--利用坐标获取地址的详细信息
        // getPoint() 类--获取位置对应的坐标
        geoCoder.getLocation(position, function (res) {
          // console.log('获取经纬度', position, '获取详细地址', res)
          const addrComponent = res.addressComponents;
          const surroundingPois = res.surroundingPois;
          const province = addrComponent.province;
          const city = addrComponent.city;
          const district = addrComponent.district;
          let addr = addrComponent.street;
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`;
            } else {
              addr += `${surroundingPois[0].title}`;
            }
          } else {
            addr += addrComponent.streetNumber;
          }
          that.choosedLocation = {
            province,
            city,
            district,
            addr,
            ...position,
          };
          that.$emit("changeCenter", {
            zoom: that.zoom,
            location: that.choosedLocation,
          });
        });
        //
      }
    },
    // showPersonPoint(ind) {
    //   this.center.lng = this.markers[ind].lng;
    //   this.center.lat = this.markers[ind].lat;
    //   this.markerClick(this.markers[ind]);
    // },
    getIcon(marker) {
      //console.log("icon",marker)
      //this.selectMarker=marker
      if (marker.type === "u") {
        return this.selfPointerU;
      } else if (marker.type === "p") {
        // console.log(parseInt(marker.useing),'88585')
        if(parseInt(marker.useing)<50){
          return this.selfPointerP1;
        }else if(parseInt(marker.useing)>50&&parseInt(marker.useing)<80){
           return this.selfPointerP3;
        }else if(parseInt(marker.useing)>80){
          return this.selfPointerP4;
        }
        
      } else if (marker.type === "b") {
        return this.selfPointerB;
      } else if (marker.type === "ug") {
        return this.selfPointerU;
      }
    },
    draw({ el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(
        new BMap.Point(this.selectMarker.lng, this.selectMarker.lat)
      );
      el.style.left = pixel.x - 80 + "px";
      el.style.top = pixel.y - 135 + "px";
    },
    drawSelect({ el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(
        new BMap.Point(this.selectModelPostion.lng, this.selectModelPostion.lat)
      );
      el.style.left = pixel.x - 80 + "px";
      el.style.top = pixel.y - 135 + "px";
    },
    mapReady({ BMap, map }) {
      let mapStyle = { style: "midnight" };
      map.setMapStyle(mapStyle);
      this.BMap = BMap;
      this.map=map;
      //map.removeOverlay()
      this.searchInRect = new BMapLib.SearchInRectangle(map, "points", {
        onSearchComplete: (e) => {
          // console.log("zaza", e);
          let arr = [];
          let pos = e.bounds;
          arr.push(pos.Dl);
          arr.push(pos.Ul);
          this.selectModelPostion.lng =
            pos.Dl.lng - (pos.Dl.lng - pos.Ul.lng) / 2;
          this.selectModelPostion.lat =
            pos.Dl.lat - (pos.Dl.lat - pos.Ul.lat) / 2;
          this.$emit("getSearchMakers", arr);
        },
      });
      //console.log("999", this.searchInRect);
    },
    markerClick(obj) {
      console.log("99999988989",obj)
      this.active = false;
      if (obj.type === "u") {
        this.selectMarker.img = obj.img;
        this.selectMarker.name = obj.name;
        this.selectMarker.phone = obj.phone;
        this.selectMarker.lng = obj.lng;
        this.selectMarker.lat = obj.lat;
        this.selectMarker.type = obj.type;
      } else if (obj.type === "p") {
        this.selectMarker.all = obj.all;
        this.selectMarker.name = obj.name;
        this.selectMarker.count = obj.count;
        this.selectMarker.real_time = obj.real_time;
        this.selectMarker.share = obj.share;
        this.selectMarker.lng = obj.lng;
        this.selectMarker.lat = obj.lat;
        this.selectMarker.type = obj.type;
      } else if (obj.type === "b") {
        //console.log("================")
        //console.log(obj)
        this.selectMarker.street_name = obj.street_name;
        this.selectMarker.anomaly_num = obj.anomaly_num;
        this.selectMarker.checked_num = obj.checked_num;
        this.selectMarker.lng = obj.lng;
        this.selectMarker.lat = obj.lat;
        this.selectMarker.type = obj.type;
      } else if (obj.type === "ug") {
        // "line1": "12",//临停
        // "line2": "12",//禁停
        // "line3": "12",//限停
        // "line4": "12",//准停
        // "address": "历下区",//统计位置地址
        // "users": "32"//运管员汇总数量
        this.selectMarker.address = obj.address;
        this.selectMarker.users = obj.users;
        this.selectMarker.line1 = obj.line1;
        this.selectMarker.line2 = obj.line2;
        this.selectMarker.line3 = obj.line3;
        this.selectMarker.line4 = obj.line4;
        this.selectMarker.lng = obj.lng;
        this.selectMarker.lat = obj.lat;
        this.selectMarker.type = obj.type;
      }

      console.log('objnew',obj,this.selectMarker)
      setTimeout(() => {
        this.active = true;
      }, 100);
    },
    //点击线
    clickLine(e) {
      //console.log("event", e);
    },
    closeMark() {
      this.active = false;
    },
  },
  computed: {
    selectMarkDataAll() {
      let all = 0;
      this.selectMarkData.map((item) => {
        //console.log(item)
        all += parseInt(item.all);
      });
      return all;
    },
    selectMarkDataRealTime() {
      let all = 0;
      this.selectMarkData.map((item) => {
        //console.log(item)
        all += parseInt(item.real_time);
      });
      return all;
    },
    selectMarkDataShare() {
      let all = 0;
      this.selectMarkData.map((item) => {
        //console.log(item)
        all += parseInt(item.share);
      });
      return all;
    },
  },
  watch:{
    markers(markers){
      console.log("监听",markers)
      //console.log(this.map)
    }
  }
};
</script>

<style scoped>
.map_box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
}
.bmView {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #08304a !important;
}
.bmView div {
  background-color: transparent !important;
}
.btn1 {
  display: block;
  color: red;
  position: absolute;
  left: 30%;
  top: 20%;
  width: 100px;
  height: 50px;
  z-index: 666;
  cursor: pointer;
}
.btn2 {
  color: red;
  position: absolute;
  left: 35%;
  display: block;
  top: 20%;
  width: 100px;
  height: 50px;
  z-index: 666;
  cursor: pointer;
}
.btn_group {
  position: absolute;
  left: 30%;
  top: 15%;
}
.btn_group >>> .el-button--primary {
  background-color: #04132c;
}
</style>
<style>
.sample {
  width: 180px;
  height: 145px;
  line-height: 40px;
  overflow: hidden;
  color: #32ffb4;
  text-align: center;
  position: absolute;
  background-image: url("~@/assets/images/map_pointer.png");
  background-position: 0 0;
  background-size: 160px 145px;
  background-repeat: no-repeat;
}
.sample1 {
  width: 180px;
  height: 180px;
  line-height: 40px;
  overflow: hidden;
  color: #32ffb4;
  text-align: center;
  position: absolute;
  background-image: url("~@/assets/images/map_pointer.png");
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pointer_img {
  margin: 12px auto 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  background: #fff;
  overflow: hidden;
}
.pointer_img img {
  width: 32px;
  height: 32px;
  display: block;
  padding: 0;
  margin: 0;
}
.pointer_name {
  padding: 8px 0 4px 0;
  font-size: 14px;
  font-family: SourceHanSansSC-Normal, SourceHanSansSC;
  font-weight: 800;
  color: #32ffb4;
  line-height: 18px;
}
.pointer_phone {
  font-size: 14px;
  font-family: SourceHanSansSC-Normal, SourceHanSansSC;
  font-weight: 800;
  color: #32ffb4;
  line-height: 18px;
}
.pointer_title {
  font-size: 14px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #32ffb4;
  line-height: 18px;
  padding: 8px 0 4px 16px;
  text-align: left;
}
.pointer_info {
  font-size: 14px;
  font-family: SourceHanSansSC-Normal, SourceHanSansSC;
  font-weight: 400;
  color: #32ffb4;
  line-height: 18px;
  text-align: left;
  padding: 0 0 4px 16px;
}
.point_line_tongji {
  position: relative;
  padding-left: 12px;
  margin-left: -5px;
}
.point_line_tongji i {
  position: absolute;
  top: 4px;
  left: 0px;
  width: 10px;
  height: 10px;
  border-radius: 10px;
}
.line1 i {
  background: #81ff5d;
}
.line2 i {
  background: #ff6f6f;
}
.line3 i {
  background: #f7b500;
}
.line4 i {
  background: #3473fe;
}
</style>
